<template>
  <el-dialog
    :title="$t('merchant.edit_merchant')"
    v-bind="$attrs"
    @close="handleClose"
    @open="handelOpen"
  >
    <div  >
      <el-form
        @submit.prevent.native
        label-width="220px"
        :model="form"
        ref="mrchForm"
        :rules="rules"
      >
        <el-form-item
          :label="$t('merchant.merchant_name') + ':'"
          prop="name"
        >
          <el-input
            maxlength="256"
            show-word-limit
            v-model="form.name"
            @blur="() => (form.name = form.name.trim())"
            :placeholder="$t('merchant.merchant_name')"
          ></el-input>
        </el-form-item>
        <el-form-item label="MID:" prop="mid">
          <div>
            <el-input
              maxlength="32"
              show-word-limit
              v-model="form.mid"
              @blur="() => (form.mid = form.mid.trim())"
              placeholder="MID"
            ></el-input>
          </div>
        </el-form-item>
        <el-form-item :label="$t('merchant.contact_name') + ':'" prop="contactName">
          <el-input
            maxlength="32"
            show-word-limit
            v-model="form.contactName"
            @blur="() => (form.contactName = form.contactName.trim())"
            :placeholder="$t('merchant.contact_name')"
          ></el-input>
        </el-form-item>
        <el-form-item :label="$t('common.email') + ':'" prop="email">
          <el-input
            maxlength="64"
            show-word-limit
            v-model="form.email"
            @blur="() => (form.email = form.email.trim())"
            :placeholder="$t('common.email')"
          ></el-input>
        </el-form-item>
        <el-form-item :label="$t('user.phone') + ':'" prop="mobile">
          <el-input
            maxlength="16"
            show-word-limit
            v-model="form.mobile"
            @blur="() => (form.mobile = form.mobile.trim())"
            :placeholder="$t('user.phone')"
          ></el-input>
        </el-form-item>
        <el-form-item :label="$t('user.country_or_region') + ':'" prop="countryCode">
          <el-select
            v-model="form.countryCode"
            filterable
            :placeholder="$t('user.country_or_region')"
            style="width: 100%"
          >
            <el-option
              v-for="item in countries"
              :key="item.countryCode3"
              :label="$t('country_or_region.' + item.countryCode3)"
              :value="item.countryCode3"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('common.address') + ':'" prop="address">
          <el-input
            maxlength="128"
            show-word-limit
            v-model="form.address"
            @blur="() => (form.address = form.address.trim())"
            :placeholder="$t('common.address')"
          />
        </el-form-item>
        <!-- <el-form-item :label="$t('common.postal_code') + ':'" prop="postalCode">
          <el-input
            maxlength="8"
            show-word-limit
            v-model="form.postalCode"
            @blur="() => (form.postalCode = form.postalCode.trim())"
            :placeholder="$t('common.postal_code')"
          />
        </el-form-item> -->
      </el-form>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">
          {{ $t('page.cancel') }}
        </el-button>
        <el-button type="primary" :loading="confirmLoading" @click="saveMrch">{{
          $t('common.confirm')
        }}</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex'
import { updateMerchant, getMerchant } from '@/api/merchant'
import { checkPhoneNum, checkMID } from '@/utils/validate.js'
import { hasPermissionSet } from '@/utils/auth'

export default {
  props:{
    mrchId:{
      type: String,
      default: ''
    }
  },
  data() {
    return {
      confirmLoading: false,
      defaultPropsMrch: {
        children: 'children',
        label: 'orgName',
        isLeaf: false
      },
      orgId: '',
      mid: '',
      form: {
        useSystemMid: true,
        queryOrg: '',
        email: '',
        name: '',
        contactName: '',
        lang: '',
        utcTime: '',
        mobile: '',
        province: '',
        countryCode: '',
        postalCode: '',
        city: '',
        address: '',
        orgId: '',
        mid: '',
        binderOrgId: ''
      }
    }
  },
  computed: {
    ...mapGetters(['orgs', 'countries']),
    rules() {
      return {
        queryOrg: [
          {
            required: true,
            message: this.$t('common.message.please_select_organization'),
            trigger: 'change'
          }
        ],
        name: [
          {
            required: true,
            message: this.$t('merchant.please_input_merchant_name'),
            trigger: 'blur'
          }
        ],
        email: [
          {
            type: 'email',
            message: this.$t('modules.login.message.invalid_email_format'),
            trigger: 'blur'
          }
        ],
        countryCode: [
          {
            required: true,
            message: this.$t('merchant.please_select_country_region'),
            trigger: 'change'
          }
        ],
        mobile: [
          {
            validator: checkPhoneNum,
            trigger: 'blur'
          }
        ],
        mid: [
          {
            required: true,
            message: this.$t('merchant.mid_is_null'),
            trigger: 'blur'
          },
          {
            validator: checkMID,
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    handleClose() {
      this.$emit('update:model-value', false)
    },
    handelOpen() {
      this.$refs['mrchForm'].resetFields()
      if (this.mrchId) {
        this.form.useSystemMid = false
        this.getMrchInfo(this.mrchId)
      }
    },
    // if has parent org
    initCountryCode(countryCode) {
      if (this.countries.some((item) => item.countryCode3 === countryCode)) {
        this.form.countryCode = countryCode
      }
    },
    saveMrch() {
      this.$refs['mrchForm'].validate((valid) => {
        if (valid) {
          this.confirmLoading = true
          updateMerchant(this.mrchId, this.form)
            .then((res) => {
              this.confirmLoading = false
              this.$message({
                message: 'Create Success',
                type: 'success'
              })
              this.$emit('refresh')
              this.handleClose()
            })
            .catch((e) => {
              this.confirmLoading = false
              this.$confirmError(e)
            })
        }
      })
    },
    getMrchInfo(mrchId) {
      getMerchant(mrchId).then((res) => {
        this.form.email = res.email
        this.form.name = res.name
        this.form.contactName = res.contactName
        this.form.lang = res.lang
        this.form.utcTime = res.utcTime
        this.form.mobile = res.mobile
        this.form.province = res.province
        this.form.countryCode = res.countryCode
        this.form.postalCode = res.postCode
        this.form.city = res.city
        this.form.address = res.address
        this.form.mid = res.mid
        this.form.orgId = res.bindOrgId
       
      }).catch(this.$confirmError)
    },
  }
}
</script>

<style scoped>
.option-style {
  padding: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
}

.el-form-item {
  margin-bottom: 15px;
  /* width: 80%; */
}
</style>
